<template>
	<view class="body_c">
		<view class="ord_in_box">
			<view class="ord_in" style="position: relative;" v-for="(item,index) in allShop" :key="index">
				<view class="in_top">
					<view class="top_img">
						<tb-image width="100%" height="100%" :src="env.imgBaseUrl + item.vmaster_product_image_id">
							<!-- <template v-slot:error>
              	<image src="../../../static/menuEmpty.png" class="img" mode="aspectFill"></image>
              </template> -->
						</tb-image>
						<!-- <image :src=" env.imgBaseUrl + item.vmaster_product_image_id"
							style="width:100%;height:100%;border-radius:20rpx;"></image> -->
					</view>
					<view class="top_pri">
						<view class="to_tp">
							<view class="text-lg" style="font-weight:700">{{item.vname}}</view>
							<view class="text-lg">¥{{item.nmoney}}</view>
						</view>
						<view class="to_tp margin-top-lg">
							<view class="text-lg" style="color: #999;">x{{item.nsell_nums }}</view>
							<view class="text-lg" v-if="item.allKcals" style="">{{item.allKcals}}Kcal</view>
						</view>
					</view>
				</view>
				<!-- <view class="sp_induct relative" v-if="item.childInfo.length!=0">
					 <view class="jtbox"></view>
			    <view class="in_list" v-for="(it,ind) in item.childInfo" :key="ind">
			        <view class="nass">{{it.names}}</view>
							<view class="kac">{{it.kcal}}</view>
							<view class="tonum">x{{it.totalnum}}</view>
					</view> 
				 </view> -->
				<view class="lines_t" v-if="index+1!=allShop.length"></view>
				<!-- <view class="tp_bot">
			     <view class="text-lg" style="margin-top:5rpx;">菜品口味</view>
					 <view>
						 <uni-rate :value="2" color="#E2E2E2" activeColor="#FE9870" margin="10"/>
					 </view>
				 </view> -->
			</view>
		</view>

		<view class="allpj">
			<view class="tp_bot" v-for="(item,index) in allpjList" :key="index">
				<view class="text-lg" style="margin-top:5rpx;">{{item.titles}}</view>
				<view>
					<uni-rate :value="item.rates" color="#E2E2E2" @change="onChange" activeColor="#FE9870"
						margin="10" />
				</view>
			</view>

			<scroll-view class="scroll-view areas" scroll-y :scroll-with-animation="true">
				<view class="">
					<textarea placeholder="我想夸一夸..." maxlength="-1" v-model="textevaluate" class="textareaClass" />
				</view>
			</scroll-view>

			<view class="ar_tags">
				<view class="tags_item" v-for="(item,index) in tags" :key="index" @click="selelabel(item)">
					{{item.name}}
				</view>
			</view>
			<view class="otherT">其他补充</view>
			<view class="addIm">
				<view class="addim">
					<view>
						<!-- <cl-upload ref="upImg" v-model="list" :action="action" :headers="headers" 
							:fileName="'uploadFile'" @onSuccess="onSuccess" :autoUpload="false" :data="formData"> -->
              <cl-upload ref="upImg" v-model="list" :action="action" :headers="headers"  v-if="list && list.length <= 3"
              	:fileName="'uploadFile'" @onSuccess="onSuccess" :autoUpload="false" :data="formData"
                @beforeUpload="beforeUpload"
                fileType="image" 
                :max="4"
                :imageFormData="{
                  count:4,
                	sourceType: ['camera ', 'album']
                }">
                <template v-slot:addImg>
                  <view class="flex justify-center align-center flex-direction flexBox-con">
                    <text class="fcon-a-tianjiazhaopian1 ics"></text>
                    <view class="add_t">添加图片</view>
                  </view>
                </template>
						</cl-upload>
					</view>
					<!-- <uni-file-picker limit="2" ref="files" :del-icon="true"  :auto-upload="false" :imageStyles="imageStyles" file-mediatype="image"  @select="select"  v-model="identity_images"  mode="grid"  @delete="pickerDeleteFIc($event)">
              <view class="flex justify-center align-center flex-direction">
                <text class="fcon-a-tianjiazhaopian1 ics"></text>
                <view class="add_t">添加图片</view>
              </view>
            </uni-file-picker> -->
					<!-- <text class="fcon-a-tianjiazhaopian1 ics"></text>
						<view class="add_t">添加图片</view> -->
				</view>
				<!-- <view class="addim" style="margin-left:20rpx;">
						 <text class="fcon-a-tianjiashipin1 ics"></text>
						 <view class="add_t">添加视频</view>
					</view> -->
			</view>
		</view>
		<view class="full_btn padding-top padding-bottom-lg">
			<view class="mbtn radius full" @click="btndebounce" :class="{gry:hasSubmited}">
				提 交
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref } from "vue";
	import mapi from '@/utils/mapi'
	import { onLoad, onShow, } from "@dcloudio/uni-app";
	import { env } from '@/api/env.js'
	import global from '@/utils/global'
	import { orderEvaluate, submitomment, getqueryDiscussLabel, } from '@/api/vmeitime-http/index.js'
	import { mnavTo, showLoading, hideLoading, debounce } from '@/utils/helper';
	const emit = defineEmits(["modelClose"]);
	const list = ref([])
	// const action = ref('https://gy.ysxdgy.com/v1/common/upload')  //http://test-static.yekjx.com/upload.do ?dirPath=goods&resouceId=&resouceType=1&dataType=198&fileLimit=1
	const action = ref(env.FileUploadUrl + '/upload.do')//https://test-static.yekjx.com/upload.do

	const headers = ref({
		// token: 'e672c63d4e034fc08054f83ad479ee3e'    
		// tiket:uni.getStorageSync('user_tiket')
	})
	const formData = {
		'dirPath': 'goods',
		'resouceType': 1,
		'fileLimit': 1,
		'dataType': 198
	}
	// const formData = ref({
	// 	'dirPath': 'goods',
	// 	'resouceType': 1,
	// 	'fileLimit':1,
	// 	'dataType': 198
	// })
	const files = ref()
	const textevaluate = ref('') //评价内容
	const ratesNum = ref() //评价星星
	const imgList = ref([])
	const filePathImg = ref([])
	const identity_images = ref([])
	const bill_id = ref()
	const isFirstItem = ref(true)
	const imageStyles = ref({
		width: '136rpx',
		height: '136rpx',
		background: ' #F6F7F9',
		border: {
			radius: '12rpx'
		}
	})
	const allShop = ref([])
	const upImg = ref()

	const allpjList = ref([
		{
			titles: "评价",
			rates: 0
		}
	])
	const tags = ref()

	const onSuccess = (reslut : any) => {
		// 把服务端返回的图片地址添加到list中与组件数据同步
		// list.value.push(reslut.data.link)
		console.log('onSuccess--------------------', reslut)
	}
  const beforeUpload = () => {
    console.log('图片上传钱--------------------------------------')
  }
	onLoad((options) => {
		console.log('options--------------------------', options.vbill_id)
		if (options.vbill_id) {
			bill_id.value = options.vbill_id
		}
		bill_id.value =
			getDetailsOrder(options.vbill_id)
		getLabel()
	})
	// const bindTextAreaBlur = (e) => {
	// 	textevaluate.value = e.detail.value
	// 	console.log(e)
	// }
	//评分
	const onChange = (e : any) => {
		console.log('评分------------------------------', e.value)
		ratesNum.value = e.value
	}
	//标签
	const selelabel = (item : any) => {
		if (!isFirstItem.value) {
			textevaluate.value += '，';
		}
		textevaluate.value += item.name;
		isFirstItem.value = false;
		console.log(item)
	}
	//商品详情

	//提交

	const btnSub = async () => {
		console.log('提交');
		if(hasSubmited.value){
			return mapi.msg('请勿重复提交');
		}
		if (textevaluate.value == '') {
			return mapi.msg('请输入评论');
		}

		// 过滤评论中的特殊字符
		// textevaluate.value = textevaluate.value.replace(/[^\u4e00-\u9fa5a-zA-Z0-9\s.,!?，。？！]+/g, '');

		// let regex = /^[a-zA-Z0-9\u4e00-\u9fa5\s.,!?，。？！:;"'(){}[\]<>“”‘’—、「」]+$/;
		// if (!regex.test(textevaluate.value)) {
		// 	return mapi.msg('评论中不能包含特殊字符');
		// }
		try {
			showLoading()
			let res = await upImg.value.submit();
			let imgList = [];
			console.log('upImg', res);
			res && res.forEach((item : any) => {
				console.log('link----------', item.link)
				item.link && imgList.push(item.link)
			})
			console.log('提交imgList:', imgList);
			let paramsArr = []
			allShop.value.forEach((item : any) => {
				// if(item.vbill_id&&item.vgoods_id&&item.sku){
					
				// }
				paramsArr.push({
					bill_id: item.vbill_id,
					goods_id: item.vgoods_id,
					goods_sell_group_id: item.ngoods_sell_group_id,
					sku: item.sku,
					grade: ratesNum.value || allpjList.value[0].rates, //等级
					content: textevaluate.value
				})
				
			})
			let params = {
				imageList: imgList,
				goodsDiscusList: [...paramsArr]
				// grade : ratesNum.value || allpjList.value[0].rates, //等级
				// content:textevaluate.value
			}
			
			submitForm(params)
		} catch (e) {
			hideLoading()
			console.error(e);
		}

	}
	//标签详情
	const getLabel = async () => {
		try {
			showLoading()
			let res = await getqueryDiscussLabel({
				type: '1158'
			})
			if (res) {
				hideLoading();
				tags.value = res.object
				console.log('标签详情------------------------------------------------------------', res)
			}
		} catch (e) {
			hideLoading();
			mapi.msg('网络繁忙，请稍后再试!');
		}
	}
	const hasSubmited = ref(false);
	const btndebounce = debounce(btnSub, 500);  //重复提交处理
	//保存评论
	const submitForm = async (data : any) => {
		try {
			showLoading()
			let res = await submitomment(data)
			hideLoading();
			if (res.result) {
				hasSubmited.value = true;
				mapi.msg('提交成功');
				setTimeout(() => {
					uni.navigateBack();
				}, 800)
				// mnavTo('/pages/others/completedDettial/completedDettial?bill_id=' +  bill_id.value )
			} else {
				mapi.msg(res.shortMessage||'网络繁忙，请稍后再试');
			}
			
		} catch (e) {
			hideLoading();
			console.error(e);
			mapi.msg('网络繁忙，请稍后再试!');
		}
	}


	//菜单详情
	const getDetailsOrder = async (id : any) => {
		try {
			showLoading()
			let res = await orderEvaluate({
				billId: id
			})
			if (res) {
				hideLoading();
				allShop.value = res.object
				// console.log('详情数据------------------------------------------------------------', res)
			}
		} catch (e) {
			hideLoading();
			mapi.msg('网络繁忙，请稍后再试!');
		}
	}
</script>

<style lang="scss" scoped>
	.textareaClass {
		width: 100%;
		word-wrap: break-word;
		/* 单词过长时自动换行 */
		line-height: 40rpx;
		letter-spacing: 2rpx;
	}

	.full_btn {
		position: fixed;
		bottom: 30rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 95%;
		z-index: 9999;
	}

	.body_c {
		padding: 0rpx 20rpx 200rpx 20rpx;

		.ord_in_box {
			background: #FFF;
			box-shadow: 0px 4rpx 36rpx 0rpx rgba(0, 0, 0, 0.08);
			border-radius: 20rpx;
			margin-top: 20rpx;
		}

		.ord_in {
			width: 100%;
			height: auto;
			// border-radius: 20rpx;
			// background: #FFF;
			// box-shadow: 0px 4rpx 36rpx 0rpx rgba(0, 0, 0, 0.08);
			// margin-top:20rpx;
			padding: 20rpx 0rpx 20rpx 0rpx;

			.in_top {
				width: 90%;
				min-height: 125rpx;
				margin: auto;
				display: flex;
				justify-content: space-between;

				.top_img {
					width: 120rpx;
					height: 120rpx;
					border-radius: 10rpx;
				}
			}

			.top_pri {
				width: 500rpx;
				height: 100%;

				.to_tp {
					display: flex;
					justify-content: space-between;
				}
			}

			.jtbox {
				position: absolute;
				width: 0;
				height: 0;
				align-self: center;
				position: absolute;
				border: 20rpx solid transparent;
				top: 150rpx;
				left: 10%;
				border-top: none;
				border-bottom-color: #FFF3DB;

			}

			.in_list {
				width: 100%;
				height: 40rpx;
				margin-top: 20rpx;
				display: flex;
				justify-content: space-between;
				font-size: 24rpx;
				line-height: 40rpx;
				padding: 0rpx 20rpx 0rpx 20rpx;

				.nass {
					width: 57%;
				}

				.kac {
					width: 25%;
				}

				.tonum {
					width: 10%;
				}
			}

			.sp_induct {
				width: 90%;
				min-height: 230rpx;
				margin: 22rpx auto;
				border-radius: 10rpx;
				background: linear-gradient(90deg, #FFF2D8 0%, #FFFDF9 100%);
				padding: 10rpx 0rpx 10rpx 0rpx;
			}

			.lines_t {
				width: 90%;
				height: 3rpx;
				background: #F8F8F8;
				margin: 20rpx auto;
			}

			.tp_bot {
				width: 90%;
				height: 42rpx;
				margin: 30rpx auto;
				display: flex;
				justify-content: space-between;
			}
		}

		.allpj {
			width: 100%;
			min-height: 324rpx;
			border-radius: 20rpx;
			background: #FFF;
			box-shadow: 0px 4rpx 36rpx 0rpx rgba(0, 0, 0, 0.08);
			margin-top: 20rpx;
			padding: 15rpx 0rpx 20rpx 0rpx;

			.tp_bot {
				width: 90%;
				height: 42rpx;
				margin: 15rpx auto;
				display: flex;
				justify-content: space-between;
			}

			.areas {
				width: 90%;
				height: 234rpx;
				margin: auto;
				border-radius: 12rpx;
				background: #F6F7F9;
				padding: 30rpx 30rpx 10rpx 30rpx;
			}

			.ar_tags {
				width: 90%;
				min-height: 56rpx;
				margin: auto;
				display: flex;
				flex-wrap: wrap;
				position: relative;
				z-index: 999;

				.tags_item {
					min-width: 114rpx;
					height: 56rpx;
					border-radius: 8rpx;
					background: #F9FBFD;
					margin-top: 15rpx;
					margin-left: 13rpx;
					font-size: 24rpx;
					padding: 0rpx 10rpx 0rpx 10rpx;
					text-align: center;
					line-height: 56rpx;
				}
			}

			.otherT {
				margin-left: 40rpx;
				margin-top: 20rpx;
				font-size: 28rpx;
			}

			.addIm {
				width: 90%;
				margin: auto;
				display: flex;
				margin-left: 20rpx;
				margin-top: 20rpx;

				// padding-left: 20rpx;
				.addim {
					width: 100%;

					.flexBox-con {
						width: 136.5rpx;
						height: 144rpx;
						border-radius: 12rpx;
						background: #F6F7F9;
					}

					.ics {
						color: #DADBDC;
						font-size: 48rpx;
						// margin:30rpx 0rpx 0rpx 40rpx;
						display: block;
					}

					.add_t {
						color: #999;
						text-align: center;
						font-size: 24rpx;
						margin-top: 10rpx;
					}
				}

			}
		}

		.bottom_btn {
			width: 100%;
			height: 82rpx;
			margin-top: 20rpx;
			margin-bottom: 20rpx;
			border-radius: 96rpx;
			background: linear-gradient(0deg, rgba(83, 168, 127, 0.50) 0%, rgba(83, 168, 127, 0.50) 100%), linear-gradient(45deg, #4CA27B 0%, #82D7B0 100%);
			font-weight: 700;
			color: #fff;
			text-align: center;
			line-height: 82rpx;
		}
	}

	//上传图片修改默认样式
	:deep .file-picker__box-content {
		margin: 0 !important;
	}

	:deep .uni-file-picker__container {
		margin: 0 !important;
		justify-content: flex-start;
		/* 子元素向左对齐 */
		gap: 20rpx;
		/* 设置子元素之间的间隔 */
	}

	:deep .file-picker__progress {
		bottom: -10rpx;
	}
</style>